<!DOCTYPE html>
<html>
<head>
	<script src="Scripts/jquery-2.1.1.js" type="text/javascript"> </script>
	<script src="Scripts/knockout-3.1.0.js" type="text/javascript"> </script>
	<link rel="stylesheet" href="Content/Jquery-ui-1.10.4/jquery-ui-1.10.4.css">
    <script src="Content/Jquery-ui-1.10.4/jquery-ui-1.10.4.js"></script>
	<script src="Views/IView.js" type="text/javascript"> </script>
	<script src="Views/ViewModelContainer.js" type="text/javascript"> </script>
	<script src="Views/ResourcesBasicContentViewModel.js" type="text/javascript"> </script>
	<script src="Views/ViewSearchCriteria.js" type="text/javascript"> </script>
	<script src="Views/NavigationButtonsViewModel.js" type="text/javascript"> </script>
	<script src="Views/AdditionalDataViewModel.js" type="text/javascript"> </script>
	<script src="Views/FullDetailsViewModel.js" type="text/javascript"> </script>	
	<script src="Controllers/IController.js" type="text/javascript"> </script>
	<script src="Controllers/PagingController.js" type="text/javascript"> </script>	
	<script src="Controllers/Controller.js" type="text/javascript"> </script>
	<!--getHardcodedJsonContent() function to get the json content, which was copied from  "HardCodedJsonContent.js". This is as a workaround to the security policies in IE and Chrome when loading local files.-->	
	<script type="text/javascript" language="javascript" src="HardCodedJsonContent.js"></script> 
	<!--<script src="Controllers/MockController.js" type="text/javascript"> </script>-->
	<script type="text/javascript">
		$(function(){
			//Binding view and controller
			var view = new ViewModelContainer();
			var controller = new Controller(view);
			//var controller = new MockController(view);
			view.initialize(controller);
			
			//Applying bindings to controls
			 ko.applyBindings(view);
			
			 view.executeSearch();
			//Defining modals
			$( "#detail-form" ).dialog({
				  autoOpen: false,
				  height: 500,
				  width: 1000,
				  modal: true
			});
			$( "#full-details-form" ).dialog({
				  autoOpen: false,
				  height: 600,
				  width: 1000,
				  modal: true
			});
		})
	</script>
	<link rel="stylesheet" href="Content/res-style.css">
</head>
<body>
	<div class="App Managed">
			<h1>Resources</h1>
			<!--Filters -->
        	<div class="row" style="margin-left: 500px; width: 800px; margin-bottom: 20px;">
					<table id="vw-ftr-btns" class="table">
						<tr>
							<th>Search</th>
							<td>
								<input id="sear-key-txt" data-bind="value: $root.filterModel.key,
								 valueUpdate: 'keyup'" class="eleinput"/>
							</td>
							<td>
								<input type="button" value="Search" id="btnSearch" data-bind="click: $root.executeSearch" class="btn"/>
							</td>
						</tr>
						<tr>
							<th>Order By</th>
							<td>
								<select id="sort-type-ddl" data-bind="options: $root.filterModel.sortTypes,
												   optionsText: 'description',
												   value: $root.filterModel.chosenSortType"
												   class="eleinput">
								</select>
							</td>
							<td>
								<select id="sort-order-ddl" data-bind="options: $root.filterModel.sortOrders,
												   optionsText: 'description',
												   value: $root.filterModel.chosenSortOrder"
												   class="eleinput">
								</select>
							</td>
						</tr>
					</table>
			</div>
			<br/>
			<div style="margin-left: 250px; width: 800px; margin-bottom: 20px;">
				<!--Resource list -->
				<table class="table-show">
					<thead>
						<tr>
							<th>Title</th>
							<th>Resource Type</th>
							<th>Media Type</th>
							<th>Language</th>
							<th>Viewable</th>
						</tr>
					</thead>
					<tbody data-bind="foreach: $root.resourcesModel.resources">
						<tr  class="resource">
							<td ><a data-bind="text: displayTitle, click: $root.onResourceClicked" href=""></a></td>
							<td data-bind="text: resourceType"></td>
							<td>
								<input data-bind="attr:{src:mediaTypeIconUrl,title:mediaType}"type="image" value=""/>
								</td>
							<td data-bind="text: language"></td>
							<td>
								<input data-bind="attr:{src:viewableIcon}, click: $root.onViewableClicked "type="image" value=""/>
							</td>
						</tr>
					</tbody>
				</table>
				<br/>
				<div style="margin-left: 300px; width: 800px; margin-bottom: 20px;">
					<!--Navigator -->
					<table id="vw-pos-btns" >
						<tr>
							<td class="vw-btn-prev"><input type="button" value="Previous" id="btnPrev"  data-bind="enable: $root.navigatorButtonsModel.previousEnabled,click: $root.movePrevious" /></td>
							<td class="vw-btn-curr"  data-bind="text: $root.navigatorButtonsModel.pageDescription" ></td>
							<td class="vw-btn-next"><input type="button" value="Next" id="btnNext" data-bind="enable: $root.navigatorButtonsModel.nextEnabled,click: $root.moveNext" /></td>
						</tr>
					</table>
				</div>
			</div>
	</div>
</body>
<!--Resource additional data -->
<div id="detail-form" title="Resource Detail">
	<form>
		<div>
			<table class="table-show">
				<tr>
					<th>Description</th>
					<td data-bind="text: $root.additionalDataViewModel.meaningfulDescription"></td>
				</tr>
				<tr>
					<th>Additional Text</th>
					<td data-bind="text: $root.additionalDataViewModel.additionalText"></td>
				</tr>
				<tr>
					<th>Categorization</th>
					<td data-bind="text: $root.additionalDataViewModel.categorization"></td>
				</tr>
				<tr>
					<th>Standards</th>
					<td>
					<ul data-bind="foreach: $root.additionalDataViewModel.standards">
						<li data-bind="text: description"></li>
					</ul >
						<table>
							<tbody >
								<tr>
									<td></td>
								</tr>    
							</tbody>
						</table>
					</td>
				</tr>
			</table>
		</div>
	</form>
</div>
<!--Resource full data -->
<div id="full-details-form" title="Full Resource Details">
	<form>
		<div>
			<table class="table-show">
				<tr>
					<th>Meaningful Description</th>
					<td data-bind="text: $root.fullDetailsViewModel.meaningfulDescription"></td>
				</tr>
				<tr>
					<th>Additional Text</th>
					<td data-bind="text: $root.fullDetailsViewModel.additionalText"></td>
				</tr>
				<tr>
					<th>Categorization</th>
					<td data-bind="text: $root.fullDetailsViewModel.categorization"></td>
				</tr>
				<tr>
					<th>Standards</th>
					<td>
					<ul data-bind="foreach: $root.fullDetailsViewModel.standards">
						<li data-bind="text: description"></li>
					</ul >
						<table>
							<tbody >
								<tr>
									<td></td>
								</tr>    
							</tbody>
						</table>
					</td>
				</tr>
				<tr>
					<th>Title</th>
					<td data-bind="text: $root.fullDetailsViewModel.additionalText"></td>
				</tr>
				<tr>
					<th>Resource Type</th>
					<td data-bind="text: $root.fullDetailsViewModel.resourceType"></td>
				</tr>
				<tr>
					<th>Media Type</th>
					<td data-bind="text: $root.fullDetailsViewModel.mediaType"></td>
				</tr>
					<tr>
					<th>GUID</th>
					<td data-bind="text: $root.fullDetailsViewModel.GUID"></td>
				</tr>
				<tr>
					<th>Language</th>
					<td data-bind="text: $root.fullDetailsViewModel.language"></td>
				</tr>
			</table>
		</div>
	</form>
</div>
</html>